<template>
  <div class="login-container">
    <LeftMenu/>
    <!-- 导航条 -->
    <div class="head">
      <img src="https://img.zcool.cn/community/0156e9574a9e6932f875a429072133.jpg@1280w_1l_2o_100sh.jpg" class="avator" alt="退出" @click="Exit">
      <div class="out" @click="Exit"><h5>退出</h5></div>
    </div>
    <div class="login-box">

      <!-- 头像区域 -->
      <div class="text-center avatar-box">
        <img src="https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/a9d3fd1f4134970a7bda798c9bcad1c8a6865de3.jpg" class="img-thumbnail avatar" alt="">
      </div>

      <!-- 表单区域 -->
      <div class="form-login p-4">

        <h3 class="success">热烈欢迎</h3>
      </div>

    </div>
  </div>
</template>

<script>
import LeftNavMenu from '@/components/leftNavMenu'
import LeftMenu from "@/components/leftNavMenu";

export default {
  name: 'MyLogin',
  components: {LeftMenu},
  comments: {
    LeftNavMenu
  },
  methods: {
    Exit(){
      window.sessionStorage.removeItem('token')
      this.$notify({
        title: '退出成功',
      });
      this.$router.push('/login')
    }
  },
}
</script>

<style lang="less" scoped>
*{
		margin: 0;
		padding: 0;
	}
.login-container {
  background-color: #35495e;
  height: 100%;
  .head{
    display: flex;
    width: 100%;
    background-color: #324057;
    height: 30px;
    .avator{
      width: 30px;
      height: 30px;
      border-radius: 50% !important;
      margin-left: 1380px;
      box-shadow: 0 0 6px #efefef;
      cursor: pointer;
      opacity: 1;
      z-index: 99;
    }
    .out{
      position: absolute;
      width: 30px;
      height: 30px;
      left: 1420px;
      color: #fff;
      line-height: 32px;
      cursor: pointer;
    }
  }
  .login-box {
    width: 400px;
    height: 250px;
    background-color: #35495e;
    border-radius: 5px;
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 130px;
      box-sizing: border-box;
      line-height: 55px;
      top: 39%;
      font-size: 30px;
      color: #fff;
    }
  }
}

.form-control {
  flex: 1;
}

.avatar-box {
  position: absolute;
  top: -65px;
  left: 140px;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #efefef;
  }
}


</style>
